<template>
  <div id="key-pass-successful">
  </div>
</template>

<script>
  import { Column } from '@antv/g2plot';
  export default {
    name: "KeyPassSuccessful",
    props:{
      createChance:{
        type: Number
      },
    },
    mounted() {
      // const data = [{"Goals":0,"number":479},{"Goals":0.1,"number":2},{"Goals":0.2,"number":24},{"Goals":0.3,"number":31},{"Goals":0.4,"number":18},{"Goals":0.5,"number":12},{"Goals":0.6,"number":8},{"Goals":0.7,"number":4},{"Goals":0.8,"number":7},{"Goals":0.9,"number":5},{"Goals":1,"number":1},{"Goals":1.2,"number":1},{"Goals":1.3,"number":1},{"Goals":1.4,"number":1},{"Goals":1.5,"number":1},{"Goals":1.6,"number":1},{"Goals":1.7,"number":2},{"Goals":1.8,"number":1},{"Goals":3.6,"number":2},{"Goals":5.3,"number":1}];
      // const data =  [
      //   {
      //     "lpa": 0,
      //     "number": 88
      //   },
      //   {
      //     "lpa": 0.01,
      //     "number": 17
      //   },
      //   {
      //     "lpa": 0.02,
      //     "number": 96
      //   },
      //   {
      //     "lpa": 0.03,
      //     "number": 79
      //   },
      //   {
      //     "lpa": 0.04,
      //     "number": 49
      //   },
      //   {
      //     "lpa": 0.05,
      //     "number": 32
      //   },
      //   {
      //     "lpa": 0.06,
      //     "number": 20
      //   },
      //   {
      //     "lpa": 0.07,
      //     "number": 16
      //   },
      //   {
      //     "lpa": 0.08,
      //     "number": 14
      //   },
      //   {
      //     "lpa": 0.09,
      //     "number": 12
      //   },
      //   {
      //     "lpa": 0.1,
      //     "number": 4
      //   },
      //   {
      //     "lpa": 0.11,
      //     "number": 6
      //   },
      //   {
      //     "lpa": 0.12,
      //     "number": 9
      //   },
      //   {
      //     "lpa": 0.13,
      //     "number": 4
      //   },
      //   {
      //     "lpa": 0.14,
      //     "number": 2
      //   },
      //   {
      //     "lpa": 0.15,
      //     "number": 1
      //   },
      //   {
      //     "lpa": 0.16,
      //     "number": 3
      //   },
      //   {
      //     "lpa": 0.17,
      //     "number": 4
      //   },
      //   {
      //     "lpa": 0.18,
      //     "number": 4
      //   },
      //   {
      //     "lpa": 0.19,
      //     "number": 2
      //   },
      //   {
      //     "lpa": 0.2,
      //     "number": 2
      //   },
      //   {
      //     "lpa": 0.22,
      //     "number": 3
      //   },
      //   {
      //     "lpa": 0.23,
      //     "number": 2
      //   },
      //   {
      //     "lpa": 0.24,
      //     "number": 2
      //   },
      //   {
      //     "lpa": 0.25,
      //     "number": 1
      //   },
      //   {
      //     "lpa": 0.26,
      //     "number": 2
      //   },
      //   {
      //     "lpa": 0.3,
      //     "number": 1
      //   },
      //   {
      //     "lpa": 0.31,
      //     "number": 1
      //   },
      //   {
      //     "lpa": 0.32,
      //     "number": 1
      //   },
      //   {
      //     "lpa": 0.34,
      //     "number": 2
      //   },
      //   {
      //     "lpa": 0.38,
      //     "number": 1
      //   },
      //   {
      //     "lpa": 0.47,
      //     "number": 1
      //   },
      //   {
      //     "lpa": 0.57,
      //     "number": 1
      //   },
      //   {
      //     "lpa": 0.59,
      //     "number": 1
      //   },
      //   {
      //     "lpa": 0.61,
      //     "number": 1
      //   },
      //   {
      //     "lpa": 0.65,
      //     "number": 1
      //   },
      //   {
      //     "lpa": 0.66,
      //     "number": 1
      //   },
      //   {
      //     "lpa": 0.74,
      //     "number": 1
      //   },
      //   {
      //     "lpa": 0.78,
      //     "number": 1
      //   },
      //   {
      //     "lpa": 0.83,
      //     "number": 1
      //   },
      //   {
      //     "lpa": 0.97,
      //     "number": 2
      //   }
      // ]
      const data = [{"sa":0,"number":112},{"sa":0.1,"number":36},{"sa":0.2,"number":28},{"sa":0.3,"number":24},{"sa":0.4,"number":32},{"sa":0.5,"number":21},{"sa":0.6,"number":27},{"sa":0.7,"number":19},{"sa":0.8,"number":17},{"sa":0.9,"number":18},{"sa":1,"number":16},{"sa":1.1,"number":13},{"sa":1.2,"number":14},{"sa":1.3,"number":14},{"sa":1.4,"number":8},{"sa":1.5,"number":12},{"sa":1.6,"number":8},{"sa":1.7,"number":3},{"sa":1.8,"number":9},{"sa":1.9,"number":6},{"sa":2,"number":5},{"sa":2.1,"number":2},{"sa":2.2,"number":2},{"sa":2.3,"number":1},{"sa":2.4,"number":2},{"sa":2.5,"number":1},{"sa":2.6,"number":3},{"sa":2.7,"number":1},{"sa":3,"number":2},{"sa":3.1,"number":1},{"sa":3.3,"number":1},{"sa":3.4,"number":1},{"sa":3.8,"number":1},{"sa":3.9,"number":1},{"sa":4.7,"number":1},{"sa":18,"number":1},{"sa":45,"number":1}]
      const current_player_createChance = this.createChance;
      const column = new Column('key-pass-successful', {
        data,
        width: 200,
        height: 150,
        // autoFit:false,
        xField: 'sa',
        yField: 'number',
        xAxis: {
          label: {
            formatter:(sa)=>{
              if(sa === '45次') {
                // return sa.slice(0,sa.length-1)
                return '45次'
              }
              return null
            },
            autoHide:false,
            autoRotate: false,
            // position:'left'
          },
          tickLine:null,
          title:null,
          line:null,
          subTickLine:null,
          grid:null,
        },
        yAxis:{
          label:{
            formatter:(number)=>{
              return parseFloat(number)
            },
          },
          title:null,
        },
        meta:{
          sa: {
            alias:'创造机会',
            formatter:(v)=>{
              return v + '次'
            }
          },
          number: {
            alias:'球员人数',
            formatter:(v)=>{
              return v + '人'
            }
          },
        },
        // maxColumnWidth: 20,
        title: {
          visible: true,
          text: '长传总数/90',
          style:{
            fontSize: 14,
            fill: 'red',
          }
        },
        // colorField: 'sa',
        // 如果需要特殊对某个值设置颜色就不能够设置colorField
        color:({sa})=>{
          if(sa === current_player_createChance){
            return '#29a5da';
          }
          return '#DCF1FA';
        },
        columnStyle:{

        },
        minColumnWidth: 2,
        maxColumnWidth:50,
        // columnSize:15,
        columnWidthRatio:1,
        legend:{
          visible: false
        },
        tooltip:{
          fields:['sa','number',],
          domStyles:{
            'g2-tooltip':{
              width: '150px',
              height:'60px'
            },
            'g2-tooltip-title':{
              display:'none'
            },
            'g2-tooltip-list-item':{
              width:'150px',
              // height:'30px',
              display: 'flex',
              justifyContent:'flexStart'
            },
            'g2-tooltip-marker':{
              marginTop:'3px'
            }
          },
        },
      });
      column.render();
    }
  }
</script>

<style scoped>
  #key-pass-successful {
    margin-top: -1px;
    width: 240px;
    height: 180px;
  }
</style>


